<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>select2</title>
  <link rel="stylesheet" href="../sea-modules/jquery/select2/3.5.2/select2-debug.css"/>
  <link rel="stylesheet" href="../sea-modules/jquery/select2/3.5.2/select2-bootstrap-debug.css"/>
  <style>
    * {
      font-family:'寰蒋闆呴粦',Arial, Helvetica, sans-serif;
      font-size:14px;
      padding:0px;
      margin:0px;
    }

    #header {
      background:#DDD;
      padding:10px 20px;
      border-bottom:2px solid #CCC;
    }

    h1 {
      font-size:22px;
    }

    h2 {
      font-size:18px;
      border-bottom:1px solid #DDD;
      margin:10px 0;
    }

    h3 {
      font-size:14px;
      margin:10px 0;
      padding-left:2px;
      border-left:2px solid #666666;
    }

    ul {
      margin-left:20px;
    }

    .main {
      margin:20px;
    }

    .code {
      border:1px solid #CCC;
      background:#EEE;
      padding:5px;
      font-size:12px;
      font-family:Verdana, Arial;
      color:#333333;
    }

    .main{width: 500px; margin: 200px auto}
    .main select{margin-left: 50px;width: 130px; }
  </style>
</head>
<body>

<select id="e1">
  <option value=""></option>
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<select multiple="" name="e9" id="e9" style="width: 300px;" class="populate" tabindex="-1">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option><option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
    <option value="VT">Vermont</option><option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>


<div class="main">
  <select id="loc_province" style="width:120px;"></select>
  <select id="loc_city" style="width:120px; margin-left: 10px"></select>
  <select id="loc_town" style="width:120px;margin-left: 10px"></select>

  <br><br><br><br>
  <input type="button" id="btnval" value="获取值" />
  <input type="button" id="btntext" value="获取文本" />
</div>


<script charset="utf-8" id="seajsnode" src="../sea-modules/seajs/seajs/2.2.1/sea.js"></script>
<script>
  seajs.config({
    base: '../sea-modules',
    alias: {
      '$': 'jquery/jquery/2.1.0/jquery',
      '$-debug': 'jquery/jquery/2.1.0/jquery-debug',
      'select2': 'jquery/select2/3.5.2/select2',
      'area': 'jquery/area/1.0.0/area'
    }
  });

  seajs.use(["$","select2","area"],function($){
    $("#e1").select2({
      placeholder: "Select a State",
      allowClear: true
    });
    $("#e9").select2({
      placeholder: "Select a State"
    });
  });

</script>
</body>
</html>